<template>
	<view class="goods_details">
		<view class="header_box w100">
			<image class="w100 h100" :src="$wanlshop.oss(storeInfo.thumb, 414, 0, 1, 'transparent', 'png')"
				mode="scaleToFill"></image>
		</view>
		<view class="fenxiang_btn" @click="fenXiang">
			<image class="w100 h100" src="../../static/store/goodsDetailes/fenx.png" mode=""></image>
		</view>
		<view class="store_box w100">
			<view class="flex">
				<view class="left_name_detail">
					<view class="left_name f500 s32 family">
						{{storeInfo.shopname}}
					</view>
					<view class="left_fangke f500 s24 family">
						商品{{storeInfo.goods}} | 访客{{storeInfo.views}}
					</view>
				</view>
				<view @click="guanzhu" :style="storeInfo.follow?'background-color: #EB8787;':''"
					class="guanzhu_box f500 s20 family txtali">
					{{storeInfo.follow?'已关注':'未关注'}}
				</view>
				<view class="portrait">
					<image class="w100 h100" :src="storeInfo.avatar_url" mode=""></image>
				</view>
			</view>
			<view class="wei_xinxi_phone_box flex" style="align-items: center;justify-content: space-between;">
				<view class="weizhi_box flex" @click="getOpenLoaction">
					<view class="weizhi_img" style="font-size: 0;">
						<image class="w100 h100" src="../../static/store/dingwei.png" mode=""></image>
					</view>
					<view class="weizhi_txt s22 f500 family">
						<block v-if="storeInfo.latitude && storeInfo.longitude">距离{{storeInfo.distance}}</block>
						{{storeInfo.city}}
					</view>
				</view>
				<view class="flex" style="align-items: center;padding-right: 28rpx;">
					<view class="xinxi_box" @click="goPinglun" style="font-size: 0;">
						<image class="w100 h100" src="../../static/store/xinxi.png" mode=""></image>
					</view>
					<view class="phone_box" @click="opPhone" style="font-size: 0;">
						<image class="w100 h100" src="../../static/store/phone.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 12rpx;">

		</view>
		<view :id="!isFixed?'ida':''" class="screen_list_box w100"
			:style="isFixed?'position:fixed;z-index:999999999999;top:0;':''">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="scroll-view-item_H uni-bg-red" v-for="(item,index) in navsList" :key="index"
					@click="onActive(item)">
					<view :class="[listIndex == item.id ? 'list_txt_active' : '','list_txt','family']">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view :id="isFixed?'ida':''" v-if="isFixed" class="screen_list_box w100" style="opacity: 0;">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="scroll-view-item_H uni-bg-red" v-for="(item,index) in navsList" :key="index"
					@click="onActive(item)">
					<view :class="[listIndex == item.id ? 'list_txt_active' : '','list_txt','family']">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="screen_list_box_c flex" style="background: #F4F4F4;padding-top: 22rpx;">
			<view class="list_box flex" v-for="(item,index) in screen_list" :key="index" @click="onActiveTwo(index)">
				<view :class="[listIndexs == index ? 'active_txt' : '', 'txt s24 f500 family']">
					{{item.txt}}
				</view>
				<image class="img" :src="item.img" mode=""></image>
			</view>
		</view>
		<zero-waterfall :list="goodsList" :listIndex="listIndex" :type_names="type_names"
			:type="storeInfo.is_photography" type="1" :clear="clearData" :status="status">
		</zero-waterfall>
		<share-box ref="child" :show="show" :type="type"></share-box>
		<view class="tabbar">
			<bottomBox :type='type1'></bottomBox>
		</view>
	</view>
</template>

<script>
	import bottomBox from '../../components/navBox/bottom.vue'
	import shareBox from '../../components/share.vue';
	export default {
		components: {
			shareBox,
			bottomBox
		},
		data() {
			return {
				listIndex: "",
				type_names: '',
				listIndexs: 0,
				show: false,
				type1: 'three',
				navsList: [],
				screen_list: [{
						img: '/static/shopping/pingfen.png',
						txt: '人气爆款'
					},
					{
						img: '/static/shopping/zuixin.png',
						txt: '最新上架'
					},
					{
						img: '/static/shopping/jiage.png',
						txt: '价格排序'
					},
					{
						img: '/static/shopping/renqi.png',
						txt: '评分最高'
					}
				],
				goodsList: [],
				storeInfo: {},
				type: 3,
				flag: null,
				id: null,
				page: 1,
				totalNum: '',
				priceType: true,
				status: 0,
				isFixed: false,
			}
		},
		onLoad(option) {
			this.id = this.$store.state.shopsname.id
			this.flag = this.$store.state.shopsname.flag
			this.getShopData(this.$store.state.shopsname.id, 3);
			uni.setNavigationBarTitle({
				title: this.$store.state.shopsname.shopname
			})
		},
		onReachBottom() {
			if (this.page >= this.totalNum) {
				this.$wanlshop.msg('我是有底线的!')
			} else {
				this.status = 0;
				this.page++;
				this.getStoreGoods();
			}
		},

		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.createSelectorQuery().in(this).select('#ida')
				.boundingClientRect(rect => {
					if (rect.top <= 0) {
						this.isFixed = true;
					} else {
						this.isFixed = false;
					}
				}).exec()
		},
		methods: {
			// 调取导航
			getOpenLoaction() {
				if (!this.storeInfo.latitude && !this.storeInfo.longitude) {
					uni.showToast({
						title: "当前店铺未开启定位！",
						icon: "none"
					})
					return false
				}
				uni.openLocation({
					latitude: Number(this.storeInfo.latitude),
					longitude: Number(this.storeInfo.longitude),
					name: this.storeInfo.shopname,
					success: function() {
						return false
					},
					fail(error) {
						return false
					}
				});
			},
			guanzhu() {
				let pages = getCurrentPages();
				let prePage = pages[pages.length - 2];
				let follow = this.storeInfo.follow ? 1 : 0;
				prePage.$vm.guanZhu(this.$store.state.shop.id, follow);
			},
			// 获取门店信息/获取门店list
			getShopData(id, follow) {
				this.$request({
					url: 'shop/getShopInfo',
					data: {
						id: id,
						lng: uni.getStorageSync('location').longitude,
						lat: uni.getStorageSync('location').latitude,
					}
				}).then(res => {
					if (res.statusCode == 200) {
						this.storeInfo = res.data.data;
						if (follow == 3) {
							this.navsList = [{
								id: 0,
								name: '全部'
							}]
							this.navsList.push(...res.data.data.category);
							this.listIndex = this.navsList[0].id;
							this.type_names = this.navsList[0].name;
							this.onActive({
								id: 0,
								name: '全部'
							})
						} else {
							if (follow == 1) {
								uni.showToast({
									title: '取消关注',
									icon: 'none',
									duration: 2000,
								})
								// item.follow = 0
							} else {
								uni.showToast({
									title: '关注成功',
									icon: 'none',
									duration: 2000,
								})
								// item.follow = 1
							}
						}

					}

				})
			},
			// 获取门店下面的商品列表
			getStoreGoods(key) {
				let that = this
				that.priceType = !that.priceType
				uni.showLoading({
					title: "加载中..."
				})
				that.$request({
					url: 'package/lists',
					method: 'POST',
					data: {
						shop_cat_id: that.listIndex,
						shop_id: that.id,
						page: that.page,
						sort: this.listIndexs == 0 ? 'views' : this.listIndexs == 1 ? 'updatetime' : this
							.listIndexs == 2 ? 'price' : 'comment',
						order: this.priceType ? "desc" : 'asc',
					}
				}).then(res => {
					if (res.statusCode == 200) {
						that.totalNum = res.data.data.last_page
						that.goodsList = that.page == 1 ? (res.data.data.data ? res.data.data.data : []) : that
							.goodsList.concat(res.data.data.data);
						console.log(that.goodsList)
						uni.hideLoading()
					}
				})
			},
			// 筛选商品列表调用子组件方法
			getData(val, num) {
				this.goodsList = val
			},
			onActive(item) {
				console.log(item)
				this.goodsList = [];
				this.listIndex = item.id;
				this.type_names = item.name;
				this.page == 1;
				this.status = 1;
				this.getStoreGoods()
			},
			onActiveTwo(ind) {
				console.log(item)
				if (this.listIndexs == ind) {
					this.priceType = !this.priceType;
				}
				this.listIndexs = ind;
				this.status = 1;
				this.page = 1;
				// this.clearData()
				this.getStoreGoods()
			},
			fenXiang() {
				this.$refs.child.xianshi(this.id)
			},
			// 调取手机电话
			opPhone() {
				if (!this.storeInfo.mobile) return false
				uni.makePhoneCall({
					phoneNumber: this.storeInfo.mobile
				})
			},
			// 去评论
			goPinglun(id) {
				uni.navigateTo({
					url: '/pages/filePages/evaluate/evaluate?shopid=' + this.storeInfo.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.goods_details {
		overflow: hidden;

		.header_box {
			height: 262upx;
			background: #999999;
		}

		.fenxiang_btn {
			width: 68upx;
			height: 68upx;
			position: absolute;
			top: 32upx;
			right: 32upx;
		}

		.store_box {
			height: 210upx;
			background: #FFFFFF;

			.left_name_detail {
				margin-left: 32upx;
				margin-top: 20upx;

				.left_name {
					color: #000000;
				}

				.left_fangke {
					color: #999999;
					margin-top: 12upx;
				}
			}

			.guanzhu_box {
				width: 80upx;
				height: 36upx;
				background: #E4E4E4;
				border-radius: 8upx 8upx 8upx 8upx;
				color: #FFFFFF;
				line-height: 36upx;
				margin-top: 24upx;
				margin-left: 14upx;
			}

			.portrait {
				width: 160upx;
				height: 160upx;
				border-radius: 80upx;
				margin-top: -70upx;
				overflow: hidden;
				position: absolute;
				right: 32upx;
			}

			.wei_xinxi_phone_box {
				margin-top: 34upx;
				margin-left: 28upx;

				.weizhi_box {
					// margin-top: 6upx;

					.weizhi_img {
						width: 26upx;
						height: 26upx;
					}

					.weizhi_txt {
						color: #E29D48;
						// margin-top: 4upx;
					}
				}

				.xinxi_box {
					width: 48upx;
					height: 48upx;
					margin-left: 134upx;
				}

				.phone_box {
					width: 48upx;
					height: 48upx;
					margin-left: 58upx;
				}
			}
		}

		.screen_list_box_c {
			padding-left: 40upx;
			padding-bottom: 10upx;
			background-color: #ffffff;
			box-sizing: border-box;

			// margin-top: 16upx;
			.list_box {
				margin-left: 53upx;

				.txt {
					color: #999999;
					// margin-top: 42upx;
				}

				.active_txt {
					color: #333333;
				}

				.img {
					width: 32upx;
					height: 32upx;
					display: inline-block;
					// margin-top: 43upx;
					margin-left: 4upx;
				}
			}

			.list_box:nth-child(1) {
				margin-left: 0;
			}
		}

		.screen_list_box {
			height: 104upx;
			background: #FFFFFF;
			// margin-top: 12upx;

			.scroll-view_H {
				white-space: nowrap;

				.scroll-view-item_H {
					display: inline-block;
					margin-right: 20upx;

					.list_txt {
						line-height: 104upx;
						margin-left: 50upx;
						font-size: 24upx;
						font-weight: 500;
						color: #999999;
					}

					.list_txt:nth-child(1) {
						margin-left: 40upx;
					}

					.list_txt_active {
						font-size: 28upx;
						font-weight: 800;
						color: #333333;
					}
				}
			}
		}
	}
</style>
<style>
	page {
		background-color: #F4F5F9;
	}
</style>